<template>
  <div class="ai_pose_step">
    <!-- 头部 -->
    <CommonHeader :balance="gemsNum" />
    <div class="top_block">
      <div class="content_top">
        <!-- banner图 -->
        <videoBar title="AI Pose" />
        <!-- 文件上传 -->
        <uploadBar @uploadStatus="uploadStatus" title="Just one portrait Generate photos with sexy poses" />
      </div>
    </div>
    <div class="second_step_title">2. Choose a pose</div>
    <!-- 轮播图 -->
    <div class="swiper_wrap">
      <ChosePoseSwiper @getAIPoseItem="getAIPoseItem" />
    </div>
    <!-- 勾选 -->
    <div class="select_checkbox_wrap" v-if="takeOffStatus">
      <van-checkbox v-model="checked">Take off clothes</van-checkbox>
    </div>
    <!-- 确认提交按钮 -->
    <div class="comfirm_btn_wrap">
      <ComfirmBtn btnName="Generate" :gemsNum="gemsNum" :diamondNum="diamondNum" :isShowDiamond="isShowDiamond"
        @comfrim="generate" />
    </div>
    <div class="bottom_block">
      <!-- 分割线 -->
      <div class="bottom_line"></div>
      <!-- 更多AI -->
      <div class="more_ai">
        <div class="title">Explore more AI features</div>
        <div class="img_wrap" @click="handleGoRemoveOff">
          <video class="my-video" width="100%" autoplay muted loop playsinline>
            <source src="../assets/videos/remove.webm" type="video/webm">
          </video>
        </div>

        <div class="sub_title" @click="handleGoRemoveOff">AI Remove Off</div>
        <div class="bottom_des">Just one portrait Generate photos with sexy poses</div>
      </div>
      <div class="bottom_line"></div>
      <!-- FAQ -->
      <FAQ />
      <!-- 底部 -->
      <CommonFooter />
    </div>
    <!-- 底部悬浮按钮 -->
    <AddToHomeScreen />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

import CommonHeader from "@/components/CommonHeader.vue";
import videoBar from "@/components/VideoBar.vue";
import uploadBar from "@/components/UploadBar.vue";
import CommonFooter from "@/components/CommonFooter.vue";
import AddToHomeScreen from "@/components/AddToHomeScreen.vue";
import FAQ from "@/components/FAQ.vue";
import ChosePoseSwiper from "@/components/ChosePoseSwiper.vue";
import ComfirmBtn from "@/components/ComfirmBtn.vue";
import api from "@/api";
import { showToast } from 'vant';
import { useRoute } from "vue-router";
import { trackEvent } from '@/utils/firebase';

const router = useRouter();
const route = useRoute();

const gemsNum = ref("");
const diamondNum = ref("100");
const takeOffStatus = ref(0)
const checked = ref(true)
const isShowDiamond = ref(false)

const ossUrl = ref(""); // oss上传成功返回的url
// 文件上传oss成功
const uploadStatus = (obj) => {
  if (obj.status) {
    ossUrl.value = obj.url;
    isShowDiamond.value = true;
  } else {
    ossUrl.value = "";
    isShowDiamond.value = false;
  }
};


let errorMsg = ref("");
const errorShow = ref(false);

// 查询积分余额
const queryBalance = async () => {
  try {
    const res = await api.pointsBalance();
    gemsNum.value = String(res.data.balance);
  } catch (err) {
    console.log(err);
  }
};
const swiperItem = ref({})
const getAIPoseItem = (data) => {
  swiperItem.value = data
  takeOffStatus.value = data.isTakeOff
}

// 提交 generate
const generate = async () => {
  if (ossUrl.value) {
    // 将图片存本地
    sessionStorage.setItem("poseossUrl", ossUrl.value);
    const params = {
      originFileUrl: ossUrl.value,
      typeCode: swiperItem.value?.typeCode,
      isTakeOff: (takeOffStatus.value && checked.value) ? 1 : 0
    };
    // 积分不足时，跳转充值页
    if (Number(gemsNum.value) < 100) {
      // 将基本参数保存，等充值成功后，在 /purchaseSuccessful页面提交任务--跳转制作页面
      sessionStorage.setItem('goPay', JSON.stringify({
        params: params,
        from: 'pose'
      }));
      router.push('/myDiamonds');
      return;
    }
    // 积分充足时，提交任务，跳转制作页
    try {
      const res = await api.taskSubmit(params);
      router.push({
        path: '/poseCreating',
        query: {
          taskNo: res.data.taskNo,
          from: "pose"
        }
      })
    } catch (err) {
      console.log(err);
      errorMsg.value = err.message;
      errorShow.value = true;
    }
  } else {
    showToast('Upload the picture first');
  }
  trackEvent('AI Pose_点击【Generate 】', { id: '100034' });//埋点
};

const handleGoRemoveOff = () => {
  router.push('/');
}

onMounted(() => {
  queryBalance();
  // 如果是从“/removeCreating”页面点击“ai pose”跳到‘/createStep“回显
  if (route.query.refer === 'remove') {
    ossUrl.value = sessionStorage.getItem("removeOSS") ? sessionStorage.getItem("removeOSS") : ''
    // 如果是从remove跳过来，需要设置 aiposeCover
    sessionStorage.setItem("poseossCoverUrl", sessionStorage.getItem("removeAiposeCover"));
    sessionStorage.setItem("aiposeCover", sessionStorage.getItem("removeAiposeCover"));
  }
  trackEvent('进入AI Pose', { id: '100030' });//埋点
});
</script>

<style scoped lang="less">
.ai_pose_step {
  padding-top: 70px;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  /* 背景图设置 */
  background-image: url('../assets/images/bg_texture@2x.png');
  background-position: top center;
  /* 从顶部开始 */
  background-repeat: no-repeat;
  /* 不重复 */
  background-size: 100% auto;
  /* 宽度满屏，高度自适应 */
  background-color: #FBFBFD;

  .top_block {
    padding: 0 16px;
    box-sizing: border-box;

    .content_top {
      width: 100%;
      min-height: 423px;
      background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.75) 100%);
      border-radius: 8px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      padding: 12px;
    }
  }

  .second_step_title {
    padding: 0 16px;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #000000;
  }

  .swiper_wrap {
    box-sizing: border-box;
    padding-left: 16px;
  }

  .comfirm_btn_wrap {
    padding: 0 16px;
    margin-top: 10px;
  }

  .bottom_block {
    box-sizing: border-box;
    padding: 0 16px 60px 16px;
    background: #fbfbfd;

    .more_ai {
      .title {
        font-size: 20px;
        color: #000000;
        line-height: 23px;
        font-weight: 700;
        margin-bottom: 16px;
        margin-top: 24px;
        text-align: center;
      }

      .img_wrap {
        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .sub_title {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.95);
        text-align: center;
        margin-top: 8px;
        font-weight: 700;
      }

      .bottom_des {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.95);
        text-align: center;
        margin-top: 4px;
      }
    }
  }

  .select_checkbox_wrap {
    img {
      width: 24px;
    }
  }
}
</style>
